<template>
  <div class="app-category _main_y">
    <div class="_content_y">
      <Header></Header>
      <div class="category-wrapper _content_x">
        <div class="category-left-wrapper" ref="categoryLeftWrapper">
          <ul class="category-left-content _flex_y">
              <li class="_flex_x" 
            :class="{'selected':selectedId==categoryInfo.id}"
            v-for="categoryInfo in categoryInfos"
             :key="categoryInfo.id"
             @click="changeSelected(categoryInfo.id)">
                <span>{{categoryInfo.name}}</span>
            </li>
          </ul>
        </div>
        <div class="category-right-wrapper"  ref="categoryRightWrapper">
          <div class="category-right-content _flex_y">
              <div class="categoryItem _flex_y imglist" v-if="selectedCategoryInfo.subCategorys!==undefined&&selectedId==1">
                 <a class="_flex_x _justify_center"
                 v-for="a in selectedCategoryInfo.subCategorys[4].subCategorys"
                 :key="a.id"
                 :href="a.categoryUrl">
                     <img :alt="a.name"
                     :src="['https://res.vmallres.com/pimages',a.photoPath,a.photoName].join('')" >
                 </a>
              </div>

            <div class="categoryItem img-swiper swiper-container" v-if="selectedCategoryInfo.subCategorys!==undefined&&selectedId==1">
                <div class="swiper-wrapper">
                    <a class="swiper-slide" 
                    v-for="a in selectedCategoryInfo.subCategorys[3].subCategorys"
                    :key="a.id"
                    :href="a.categoryUrl">
                    <img :src="['https://res.vmallres.com/pimages',a.photoPath,a.photoName].join('')" alt="a.name">                    
                    </a>
                </div>
            </div>


              <div class="categoryItem" 
              v-for="showCategoryItem in selectedCategoryInfo.subCategorys"
              :key="showCategoryItem.id">   
                  <h3 v-if="showCategoryItem.subCategorys">{{showCategoryItem.name}}</h3>
                  <ul class="_wrap"
                  v-if="showCategoryItem.name">
                  
                      <li class="_flex_y _align_center _justify_around"
                       v-for="li in showCategoryItem.subCategorys"
                      :key="li.id">
                      <router-link 
                      class="_flex_y _align_center _justify_around" 
                      :to="{name:'details'}">
                          
                            <img :src="['https://res.vmallres.com/pimages',li.photoPath,li.photoName].join('')" alt="">
                            <span>{{li.name}}</span>
                         
                        </router-link>
                      </li>
                  </ul>
              </div>
          </div>
        </div>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>
<script>
import Header from "components/layout/Header";
import scroll from 'utils/scroll';
import * as http from 'utils/http';

export default {
  name: "category",
  components: {
    Header
  },
  data(){
      return{
          categoryInfos:[],
          selectedId:1,
          selectedCategoryInfo:[]
      }
  },
  methods:{
    changeSelected(id){
        this.selectedId=id;
        this.selectedCategoryInfo=this.categoryInfos.find( val => val.id==this.selectedId )
    }
  },
  async created(){
     this.categoryInfos=await http.get(this,'mcp/getCategoryInfo?portal=2&lang=zh-CN&country=CN')
     if(this.categoryInfos) this.selectedCategoryInfo=this.categoryInfos[0]
  },
  mounted() {
  },
  watch:{
      categoryInfos(){
        scroll(this,'categoryLeftWrapper')
        scroll(this,'categoryRightWrapper') 
      },
      selectedCategoryInfo(){
          
          setTimeout(() => {
              new Swiper(".img-swiper", {
                slidesPerView: 3.1
                });
          }, 1000);
      }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/_ellipsis'
.app-category
  .category-wrapper
    margin-bottom 0.52rem
    .category-left-wrapper
      width 27%
      overflow hidden
      .category-left-content
        li
            height .51rem
            position relative
            span 
                padding .17rem 0 .17rem .17rem
                font-size .14rem
            &.selected
                color #e01d20
                ::after
                    content: '';
                    height: .18rem;
                    position: absolute;
                    width: 0.02rem;
                    top .16rem  
                    right 0
                    background-color: #e01d20;                    
    .category-right-wrapper
        width 73%
        overflow hidden
        .category-right-content
            .categoryItem 
                &.imglist
                    a
                        margin-top .06rem
                        img 
                            width 2.52rem
                            height .7rem
                            border-radius .05rem
                &.img-swiper
                    width 2.6rem
                    height .4rem
                    margin .06rem 0 0 .12rem
                    a 
                        margit-right .05rem
                        img 
                            width .79rem
                            height .4rem
                            
                h3 
                    text-align center
                    padding .17rem 0 .08rem
                    font-weight normal
                ul 
                    padding-left .1rem  
                    li
                        width .66rem
                        margin-right .25rem
                        height 1.05rem
                        &:nth-of-type(3n)
                            margin-right 0
                        a
                           width .66rem
                           height 1.05rem
                        
                        img 
                            width .5rem
                            height .5rem
                        span 
                            width .66rem
                            color #666666
                            text-align center
                            height .26rem  
                            overflow hidden
                            line-height .13rem  
                            word-break break-all
                            text-overflow ellipsis
                            display -webkit-box
                            -webkit-line-clamp 2
                            -webkit-box-orient vertical

</style>
